<template>
	<view class="detailComment" >
		<view class="body" @tap="toLookAll">
			<view class="head">
				<image :src="message.replyuserImage?message.replyuserImage:message.userImage?message.userImage:'/static/img/toux2x.png'" mode="" v-if="isNeedReply" @tap.stop="toPersonalDeail" :data-userid="message.replyuserId"></image>
				<image :src="message.userImage?message.userImage:'/static/img/toux2x.png'"  v-if="!isNeedReply" @tap.stop="toPersonalDeail" :data-userid="message.userId"></image>
			</view>
			<view class="body_content">
				<text class="name" v-if="isNeedReply">{{message.replyuserName?message.replyuserName:message.userName}}</text>
				<text class="name" v-if="!isNeedReply">{{message.userName}}</text>
				<view class="comment" v-if="message.pid&&message.pid!=0">
					{{message.content}}//<text class="comment_name" @tap.stop="toPersonalDeail" :data-userid="message.replyuserId">@{{message.replyuserName}}：</text>{{message.coverContent}}
				</view>
				<view class="comment" v-if="!message.pid||message.pid==0">
					<text class="comment_content">{{message.content}}</text>
				</view>
				<view class="allComment" v-if="isNeedReply&&commentReplies.count>0">
					<template v-for="(item,index1) in commentReplies.list">
						<view class="allComment_content" :key='index1' v-if="item.pid&&item.pid!=0">
							<text class="comment_name" @tap.stop="toPersonalDeail" :data-userid="item.userId">{{item.userName}}：</text>{{item.content}}//<text class="comment_name" @tap.stop="toPersonalDeail" :data-userid="item.replyuserId">@{{item.replyuserName}}：</text>{{item.coverContent}}
						</view>
						<view class="allComment_content"   :key='index1' v-if="!item.pid||item.pid==0">
							<text class="comment_name" @tap.stop="toPersonalDeail" :data-userid="item.userId">{{item.userName}}：</text>{{item.content}}
						</view>
					</template>
					<text class="toLookAll" @tap="toLookAll">查看全部回复</text>
				</view>
				<view class="message" >
					<view class="time">
						<text>{{message.addTime}}</text>
					</view>
					<text class="dele" v-if="message.deleteState==0" @tap.stop="toDele" :data-answerid='message.answerId' :data-state='message.state' :data-commentid='message.commentId'>删除</text>
					<view class="comment_icon" @tap.stop="toAnswer">
						<image src="/static/svg/comments.svg" mode=""></image>
						<text>{{message.discussNumber>0?message.discussNumber:'回复'}}</text>
					</view>
					<view class="assist" @tap.stop="toPraise" :data-commentid='message.commentId' :data-state='message.state' :data-index='index' :data-zan='message.zan'>
						<image :src="message.zan==0?praised:praise" mode=""></image>
						<text :class="{isDoed:message.zan==0}">{{message.zanNumber>0?message.zanNumber:'点赞'}}</text>
					</view>
				</view>
			</view>
		</view>
		<commentInput v-if='inputShow' @blur='commentInputBlur' @submit='commentInputSubmit' :value1='value'/>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import commentInput from "@/components/comment/commentInput.vue"
	export default {
		components: {commentInput},
		props: {
			id: {
				type:String,
				default:""
			},
			isNeedReply: {
				type:Boolean,
				default:true
			},
			index:{
				type:Number,
				default:0
			},
			message:{
				type:Object,
				default(){
				    return {}
				}
			},
			commentReplies:{
				type:Object,
				default(){
				    return {}
				}
			},
		},
		data() {
			return {
				inputShow:false,
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
				isPraised:false,
				value:""
			};
		},
		methods: {
			toLookAll() {
				if(!this.isNeedReply){
					this.toAnswer()
					return
				}
				uni.navigateTo({
					url: '/pages/homeDesign/allReply?commentId='+this.message.commentId+"&state="+this.message.state
				})
			},
			toAnswer(){
				if(this.isNeedReply){
					uni.navigateTo({
						url: '/pages/homeDesign/allReply?commentId='+this.message.commentId+"&isInput=true&state="+this.message.state
					})
				}else{
					this.inputShow=true
				}
			},
			commentInputBlur(value){
				this.inputShow=false
				this.value=value
			},
			commentInputSubmit(value){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$emit("reply",value,this.index)
				this.value=''
				this.inputShow=false
			},
			async toPraise(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(this.isNeedReply){
					let data={}
					data.commentId=e.currentTarget.dataset.commentid
					data.userId=localStorage.getItem("userId")
					data.state=e.currentTarget.dataset.state
					if(e.currentTarget.dataset.zan!=0){
						let res=await urls.commentReplyFabulous(data)
						if(res.code==0){
							this.$emit('praise',e.currentTarget.dataset.index,true)
						}
					}else{
						let res=await urls.reduceCommentZan(data)
						if(res.code==0){
							this.$emit('praise',e.currentTarget.dataset.index,false)
						}
					}
				}else{
					let data={}
					data.replyId=this.message.replyId
					data.userId=localStorage.getItem("userId")
					if(this.message.zan!=0){
						let res=await urls.fabulousReply(data)
						if(res.code==0){
							this.$emit('praise',e.currentTarget.dataset.index,true)
						}
					}else{
						let res=await urls.reduceCommentReplyZan(data)
						if(res.code==0){
							this.$emit('praise',e.currentTarget.dataset.index,false)
						}
					}
				}
			},
			toDele(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(this.isNeedReply){
					uni.showModal({
						content: '是否删除这条评论？',
						success:async res=> {
							if (res.confirm) {
								let data={}
								data.designId=e.currentTarget.dataset.answerid
								data.commentId=e.currentTarget.dataset.commentid
								data.state=e.currentTarget.dataset.state
								data.userId=localStorage.getItem("userId")
								let res1=await urls.deleteComment(data)
								if(res1.code==0){
									this.$emit("dele",1)
								}
							}
						},
					})
				}else{
					uni.showModal({
						content: '是否删除这条回复？',
						success:async res=> {
							if (res.confirm) {
								let data={}
								data.commentId=this.message.commentId
								data.replyId=this.message.replyId
								data.userId=localStorage.getItem("userId")
								let res1=await urls.deleteCommentReply(data)
								if(res1.code==0){
									this.$emit("dele")
								}
							}
						},
					})
				}
			},
		},
	}
</script>

<style lang="scss">
.detailComment{
	padding:30rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}
.body{
	display: flex;
	.head{
		width: 72rpx;
		image{
			display: block;
			height: 72rpx;
			width: 72rpx;
			border-radius: 50%;
		}
	}
	.body_content{
		width: 597rpx;
		margin-left: 20rpx;
		.name{
			display: block;
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
		.comment{
			display: block;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #666666;
			letter-spacing: 1rpx;
			margin: 20rpx 0 20rpx;
		}
		.allComment{
			width: 597rpx;
			background-color: #F4F4F4;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			padding: 20rpx 20rpx 30rpx;
			.allComment_content{
				margin-top: 21rpx;
				font-size: 26rpx;
				line-height: 36rpx;
				letter-spacing: 1rpx;
				color: #666666;
				text{
					padding: 0;
					display: inline-block;
					font-size: 26rpx;
					line-height: 36rpx;
					letter-spacing: 1rpx;
					color: #666666;
				}
				.comment_name{
					color: #999999;
				}
			}
			.toLookAll{
				font-size: 26rpx;
				letter-spacing: 1rpx;
				color: #A66354;
				display: block;
				line-height: 26rpx;
				margin-top: 30rpx;
			}
		}
		.message{
			width:100% ;
			display: flex;
			align-items: center;
			position: relative;
			padding-top: 10rpx;
			.time{
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 1rpx;
				text{
					margin-left: 20rpx;
				}
			}
			.dele{
				font-size: 26rpx;
				color: #A66354;
				letter-spacing: 1rpx;
				margin-left: 30rpx;
			}
			.comment_icon{
				position: absolute;
				left: 373rpx;
				display: flex;
				align-items: center;
				image{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
			}
			.assist{
				position: absolute;
				right: 0;
				display: flex;
				align-items: center;
				image{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
				.isDoed{
					color: #B3392B;
				}
			}
		
		}
	}
}
.comment_content{
	color: #666666;
}

.allComment>view:first-of-type{
	margin-top:0rpx!important ;
}
.time>text:first-of-type{
	margin-left:0!important ;
}
</style>
